namespace snow {
  // 雪花
  class Snowflake {
    speed: number
    x: number
    y: number
    ele: HTMLElement
    size: number
    constructor() {
      this.speed = random(0, 1);
      this.x = random(random(1, 100), random(1, 100));
      this.y = -10;
      this.size = random(10, 50)
      this.init()
    }

    move() {
      this.y = this.y + this.speed
      if (this.y > 100) {
        this.y = -10
      }
      this.ele.style.top = this.y + '%'
    }
    init() {
      const img = document.createElement('img')
      img.src = './img/snow.png'
      img.style.height = this.size + 'px'
      img.style.position = 'absolute'
      img.style.left = this.x + '%'
      img.style.top = this.y + '%'
      this.ele = img
    }
    show(): HTMLElement {
      this.move()
      return this.ele
    }
  }

  class Screen {
    root: HTMLElement
    Snowflakes: Snowflake[]
    constructor(parameters?) {
      this.init()
    }
    init() {
      const root = document.createElement('main')
      root.className = 'root'
      root.style.background = "url('./img/snow-night.jpg') center/cover no-repeat"
      this.root = root
      document.body.appendChild(this.root)
    }
    render(snows: Snowflake) {
      // this.root.innerHTML = snows.map(snow => {
      //   return snow.show().outerHTML
      // }).join('')
      this.root.appendChild(snows.show())
    }
  }

  const CreateScreen: () => Screen = ((params?) => {
    let instance: Screen
    return () => {
      if (instance) {
        return instance
      }
      return new Screen(params)
    }
  })()

  function random(min: number, max: number): number {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }


  const screen = CreateScreen()


  const snows = []

  for (let i = 0; i < 20; i++) {
    snows.push(new Snowflake())
  }

  function main() {
    snows.forEach(snow => {
      screen.render(snow)
    })
    window.requestAnimationFrame(main)
  }

  window.requestAnimationFrame(main)
}